<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>

<body>
  <!-- file标签 -->
  <input type="file" class="upload" multiple>

  <!-- 渲染服务器返回的图片URL -->
  <img src="" class="img" alt="">

  <!-- 导入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>

  <script>
    /* 实现图片上传的步骤分析
    1、点击选择文件上传按钮
    2、获取点击的图片资源
    3、将图片资源发送请求传递给服务器
    4、服务就会返回图片的地址，将其回显出来
    */
    const upload = document.querySelector('.upload')
    //  1、点击选择文件上传按钮
    upload.addEventListener('change', function () {
      // 2、获取点击的图片资源
      console.log(this.files[0], 7);
      /* 说明：不能直接传递资源文件，只能传递数据，想传递资源文件 需要使用  FormData对象 */
      /* 包装器
      研究对象：3要素：属性、方法、事件
      */
      const fd = new FormData()
      // console.log(fd, 7777);
      // fd.append(键，值)
      fd.append('img', this.files[0])
      // axios.post('http://hmajax.itheima.net/api/uploadimg', fd).then(res => {
      //   console.log(res, 89);
      //   document.querySelector('.img').src = res.data.data.url
      // })
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: "post",
        data: fd
      }).then(res => {
        console.log(res, 89);
        document.querySelector('.img').src = res.data.data.url
      })
    })
  </script>
</body>

</html>